<template>
  <section class="main">
    <ul class="todo-list">
      <li v-for="(todo, index) in list" :key="todo.id" class="todo">
        <div class="view">
          <span class="index">{{ index + 1 }}.</span>
          <label>{{ todo.name }}</label>
          <button @click="handleDelete(todo.id)" class="destroy">删除</button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { TodoItem } from './types'

interface Props {
  list: TodoItem[]
}

interface Emits {
  (e: 'delete-todo', id: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleDelete = (id: number) => {
  emit('delete-todo', id)
}
</script>